<style scoped>
</style>
<template>
  <div>
    <Form ref="formData" :model="formData" :rules="ruleInline" :label-width="120">
      <FormItem prop="batchName" label="系统名称">
         <Input type="text" v-model="formData.batchName" placeholder="成本系统" />
      </FormItem>

      <FormItem prop="sourceDbId" label="来源数据库">
        <Select v-model="formData.sourceDbId" filterable>
          <Option
            v-for="item in this.databaseList"
            :key="item.dbId"
            :value="item.dbId"
          >{{ item.dbSysname }}</Option>
        </Select>
      </FormItem>

      <FormItem prop="targetDbId" label="目标数据库">
        <Select v-model="formData.targetDbId" filterable>
          <Option
            v-for="item in this.databaseList"
            :key="item.dbId"
            :value="item.dbId"
          >{{ item.dbSysname }}</Option>
        </Select>
      </FormItem>

      <FormItem>
        <Button  type="success" @click="handleSubmit('formData')">保存</Button>
      </FormItem>
    </Form>
    <Spin fix v-show="addLoading"></Spin>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  name: "Add",
  data() {
    return {
      addLoading: false,
      databaseList: [],
      formData: {
        batchName: "",
        sourceDbId: "",
        targetDbId: "",
      },
      ruleInline: {
        batchName: [
          {
            required: true,
            message: "系统不能为空",
            trigger: "blur"
          }
        ],
        sourceDbId: [
          {
            type: 'number',
            required: true,
            message: "来源数据库不能为空",
            trigger: "blur"
          }
        ],
        targetDbId: [
          {
            type: 'number',
            required: true,
            message: "目标数据库不能为空",
            trigger: "blur"
          }
        ]

      }
    };
  },
  methods: {
    //提交表单加校验表单
    handleSubmit(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {

          this.addLoading = true;

          if(this.formData.sourceDbId == this.formData.targetDbId){
              this.addLoading = false;   
              return this.$Message.error("来源和目标数据库不能是同一个!");
          }


          const result = await this.$api.addBatch(this.formData);

          if (result.code === 1) {
            this.$Message.success("保存成功!");
            this.$emit('fun')
          } else {
            this.$Message.error(result.errMsg);
          }
          this.addLoading = false;   


        }
      });
    },
    //获取数据库列表
    async getEtlDBList(pages) {
      const sizes = 200;
      const data = {
        pages:1,
        sizes:200
      };
      const result = await this.$api.getEtlDBList(data);
      this.loading = false;
      if (result.code === 1) {
        this.databaseList = result.data.list;
        
        console.log("获取数据库列表");
        console.log(this.databaseList);
      }
    }

  },
  mounted() {
    this.getEtlDBList();
  }
};
</script>